<template>
  <div>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="false"
      :loading="loading || false"
      :scroll="{ scrollToFirstRowOnChange: true, y: scrollY }"
      v-bind="$attrs"
      v-on="$listeners"
    />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  columns: {
    type: Array,
    default: () => {
      return []
    }
  },
  dataSource: {
    type: Array,
    default: () => {
      return []
    }
  },
  loading: Boolean,
  scrollY: {
    // 超过多少高度滚动
    type: Number,
    default: () => {
      return 300
    }
  }
})

const emit = defineEmits('updateList')
const handleScroll = (e) => {
  const { scrollHeight, scrollTop, clientHeight } = e.target || {}
  if (scrollTop + clientHeight === scrollHeight) {
    emit('updateList')
  }
}

onMounted(() => {
  document.querySelector('.ant-table-body')?.addEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped></style>